<template>
	<view v-show="show" class="signature-box">
		<view id="head" class="head-box">
		  <!-- <image
		    src="https://wxlsrecode2.oss-cn-shanghai.aliyuncs.com/wxls_cloud/2022-08-30/1236ace5-20fb-4a9b-ab9c-a679c6222f55.jpg"
		  ></image> -->
		</view>
		<canvas class="canvas" id="canvas" />
		<div class="actions">
			<button class="actions-item" style="background-color: #ed5c5c" @click="handleClear">
				清 除
			</button>
			<button class="actions-item" @click="handleUndo">撤 销</button>
			<button class="actions-item" @click="handlePreview">生 成</button>
		</div>
	</view>
</template>

<script>
	import SmoothSignature from 'smooth-signature'
	export default {	
	  data() {
	    return {
	      previewImage: '',
	      maskShow: false,
	      clickMask: false,
				show: false,
	    }
	  },
	  mounted() {
	    this.init_load()
	  },
		methods: {
			async init_load() {
				const query = uni.createSelectorQuery().in(this)
				query
					.select('#head')
					.boundingClientRect((data) => {
						console.log(111,document.getElementById('canvas'));
						const canvas = document.getElementById('canvas').children
	
						// 处理uni的画布有一层遮挡div
						if (canvas[1].tagName === 'DIV') {
							canvas[1].style.position = 'absolute'
							canvas[1].style.left = '-999px'
							canvas[1].style.top = '-999px'
						}
	
						const width =
							window.innerWidth ||
							document.documentElement.clientWidth ||
							document.body.clientWidth
	
						const height =
							window.innerHeight ||
							document.documentElement.clientHeight ||
							document.body.clientHeight
	
						const options = {
							width: width,
							height: height - data.height - 90,
							minWidth: 3,
							maxWidth: 10,
							// color: "#1890ff",
							bgColor: '#f6f6f6'
						}
						this.signature = new SmoothSignature(canvas[0], options)
					})
					.exec()
			},
			// 生成图
			handlePreview() {
				const isEmpty = this.signature.isEmpty()
				if (isEmpty) {
					uni.showToast({
						title: '请先签名',
						duration: 1500,
						icon: 'none'
					})
					return
				}
				uni.showLoading({ title: '生成中...', mask: true })
				// const canvas = this.signature.getRotateCanvas(-90) // 旋转图片
				const canvas = this.signature.getRotateCanvas(0) // 旋转图片
				const pngUrl = canvas.toDataURL()
				this.previewImage = pngUrl
				this.$emit('create', pngUrl)
				const timer = setTimeout(() => {
					uni.hideLoading()
					this.close()
				}, 800)
			},
			// 撤销
			handleUndo() {
				this.signature.undo()
			},
			// 清除
			handleClear() {
				this.signature.clear()
			},
			
			open() {
				this.show = true
			},
			
			close() {
				this.show = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.signature-box {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		z-index: 999;
	}
	.actions {
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  display: flex;
	  justify-content: space-around;
	  align-items: center;
	  width: 100%;
	  height: 180rpx;
	
	  .actions-item {
	    padding: 0px 20px;
			margin: 0;
	    font-size: 18px;
	    font-weight: 600;
	    color: #fff;
	    background-color: #45a3fd;
	    border-radius: 40rpx;
			transform: rotate(90deg);
	  }
	}
</style>